<template>
  <div>
    <div style="overflow:auto;height: 500px;" ref="wfContainer">
      <waterfall
        :align="align"
        :line-gap="200"
        :min-line-gap="100"
        :max-line-gap="220"
        :single-max-width="300"
        :watch="items"
        @reflowed="reflowed"
        ref="waterfall"
      >
        <!-- each component is wrapped by a waterfall slot -->
        <waterfall-slot
          v-for="(item, index) in items"
          :order="index"
          :key="index"
          move-class="item-move"
          :height="150"
          :width="150"
        >
          <img  src="https://via.placeholder.com/150"/>
        </waterfall-slot>
      </waterfall>
    </div>
  </div>
</template>

<script>
  import CreateTrain from "../../view/algorithmManage/createTrain/createTrain"
  import itemFactory from "../../utils/itemFactory";
  import { throttle } from "../../utils/index.js";
  import Waterfall from "vue-waterfall/lib/waterfall";
  import WaterfallSlot from "vue-waterfall/lib/waterfall-slot";
  let scrollCallback;
  export default {
    name: "data-set-show",
    components: {
      waterfall: Waterfall,
      "waterfall-slot": WaterfallSlot
    },
    data() {
      return {
        align: "center",
        items: itemFactory.get(100),
        isBusy: false,
        waterfallOffSetHeight: 0,
        container: null
      };
    },
    mounted() {
      const container = (this.container = this.$refs.wfContainer);
      const waterfall = this.$refs.waterfall.$el;
      this.waterfallOffSetHeight = waterfall.offsetHeight;
      scrollCallback = throttle(
        e => {
          if (container.scrollTop + 800 > this.waterfallOffSetHeight) {
            if (!this.isBusy) {
              this.isBusy = true;
              setTimeout(() => {
                this.items = this.items.concat(itemFactory.get(50));
              }, 1000);
            }
          }
        },
        10,
        this
      );
      this.container.addEventListener("scroll", scrollCallback);
    },
    beforeDestroy() {
      console.log("befoer destroy");
      this.container.removeEventListener("scroll", scrollCallback);
    },
    methods: {
      reflowed: function() {
        this.isBusy = false;
        this.waterfallOffSetHeight = this.$refs.waterfall.$el.offsetHeight;
      }
    }
  };
</script>

<style >
  .item {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    font-size: 1.2em;
    color: rgb(0, 158, 107);
  }
  .item:after {
    content: attr(index);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
  .wf-transition {
    transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
  }
  .wf-enter {
    opacity: 0;
  }
</style>

